<!--
 * @页面名称:系统参数
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card systemParameter">
    <!-- 顶部操作按钮 -->
    <div class="addbtn">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <!-- table表格 -->
    <div style="height: calc(100% - 42px)">
      <Stable :columns="tableSetting.columns" :data="tableSetting.data" :toolbarConfigVisible="true"></Stable>
    </div>
    <!-- 新增修改弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="序号:" prop="Sys_Order">
          <el-input type="number" v-model="formData.Sys_Order"></el-input>
        </el-form-item>
        <el-form-item label="键:" prop="Sys_Key">
          <el-input v-model="formData.Sys_Key"></el-input>
        </el-form-item>
        <el-form-item label="值:" prop="Sys_Value">
          <el-input v-model="formData.Sys_Value"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="Sys_Remark">
          <el-input :rows="2" type="textarea" v-model="formData.Sys_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useAppStore } from "@/stores/modules/app";
const appStore = useAppStore();
const { proxy } = useCurrentInstance();
// 表格配置
const tableSetting = reactive({
  columns: [
    { field: "Sys_Order", title: "序号", sortable: true },
    { field: "Sys_Key", title: "键", sortable: true },
    { field: "Sys_Value", title: "值", sortable: true },
    { field: "Sys_Remark", title: "备注", sortable: true },
    {
      title: "操作",
      sortable: true,
      width: 120,
      slots: {
        default: ({ row }: any) => {
          return [
            <el-space>
              <el-link underline={false} type="primary" onClick={() => edit(row)}>
                修改
              </el-link>
              <el-link underline={false} type="primary" onClick={() => del(row)}>
                删除
              </el-link>
            </el-space>
          ];
        }
      }
    }
  ],
  data: [] as any
});
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 表单配置
const formData = reactive({
  Sys_Order: 1,
  Sys_Key: "",
  Sys_Value: "",
  Sys_Remark: ""
});
// 单击保存数据
const clickObj = ref();
// 表单实例
const formRef = ref<FormInstance>();
// 表单规则
const rules = reactive<FormRules>({
  Sys_Key: [{ required: true, message: "请输入键!", trigger: "blur" }],
  Sys_Value: [{ required: true, message: "请输入键!", trigger: "blur" }]
});
// 表格数据
const getData = () => {
  proxy.$vueAxios.get("Master_Base_SysConfig/Get", { order: "Sys_Order asc" }).then((res: any) => {
    tableSetting.data = res.List;
  });
};
// 新增事件
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formRef.value?.resetFields();
};
// 修改
const edit = (row: any) => {
  clickObj.value = row;
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  nextTick(() => {
    formData.Sys_Order = row.Sys_Order;
    formData.Sys_Key = row.Sys_Key;
    formData.Sys_Value = row.Sys_Value;
    formData.Sys_Remark = row.Sys_Remark;
  });
};
// 删除
const del = (row: any) => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_SysConfig/Delete", [row.Sys_ID]).then((res: any) => {
        if (res.Mark) {
          getData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message.error("删除失败!");
    });
};
// 弹框确认事件
const handle = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_SysConfig", {
            sys_ID: proxy.$global.createID(),
            sys_Order: formData.Sys_Order,
            sys_Key: formData.Sys_Key,
            sys_Value: formData.Sys_Value,
            sys_Remark: formData.Sys_Remark
          })
          .then(async () => {
            dialogSetting.visible = false;
            getData();
            await appStore.setSysConfigData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_SysConfig", {
            sys_ID: clickObj.value.Sys_ID,
            sys_Order: formData.Sys_Order,
            sys_Key: formData.Sys_Key,
            sys_Value: formData.Sys_Value,
            sys_Remark: formData.Sys_Remark
          })
          .then(async () => {
            dialogSetting.visible = false;
            getData();
            await appStore.setSysConfigData();
          });
      }
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
.systemParameter {
  position: relative;
  .addbtn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;
  }
}
</style>
